<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">
    <link rel="stylesheet" href="css/search.css">
    <link href="https://unpkg.com/layui@2.11.5/dist/css/layui.css" 
    rel="stylesheet">
    <link rel="icon" type="image/png" sizes="16x16" href="./img/logo.png">
    <title>游侠客 - 好玩的主题旅行平台</title>
</head>
<body>
    <div class="Search_head">
        <div class="box">
            <i></i>
            <input type="text" name="" id="ipt" placeholder="海岛集">
        </div>
        <p onclick="back()">
            取消
        </p>
    </div>
    <div>

    </div>
    <div class="Search__Recommend">
        <h3>搜索推荐</h3>
        <div class="ScrollX scroll__H__view">
            <div class="Search__Recommend__items">
                <div class="Search__Recommend__item">
                    <img src="https://qimg4.youxiake.com/upload/202507/21/1f70256b12e40db7.jpg?imageMogr2/auto-orient/thumbnail/!235x134r/strip/gravity/Center/crop/!235x134/quality/90" alt="">
                    <h2>天凉好个秋</h2>
                    <span>预存第一场秋日旅行</span>
                </div>
            </div>
        </div>
        <div class="Search__Rank">
            <p>搜索排行</p>
            <div class="Search__Rank__lists">
               
            </div>  
        </div>
        <div class="Search__more">
            <span>没有你想要的？</span>
            <div>
               <p> 目的地大全</p>
               <i></i>
            </div>
        </div>
        <div class="Search__new">
            <div class="Search__new__title">
                <h3>新品推荐</h3>
            </div>
            <div class="flow-demo" id="ID-flow-demo">
                <div class="Search__new__lists">
                
            </div>
            </div>
            
        </div>
    </div>
</body>
<script>
    
    const Search__Recommend__items=document.querySelector('.Search__Recommend__items')
    const Search__Rank__lists=document.querySelector('.Search__Rank__lists')
    const Search__new__lists=document.querySelector('.Search__new__lists')
    fetch('https://m.youxiake.com/api/m/search/hot?page=1').then(res=> res.json()).then(res1 => {

        res1.data.recommendSearch.forEach((item,index) => {
            Search__Recommend__items.innerHTML+=`
            
                    <div class="Search__Recommend__item">
                        <img src="${item.cover}" alt="">
                        <h2>${item.title}</h2>
                        <span>${item.subTitle}</span>
                    </div>
             
        `
        });

        res1.data.hotSerach.forEach((item,index) => {
            Search__Rank__lists.innerHTML+=`
            
                   <div class="list">
                    <span class="index" style="background-image: url('${index<3?'https://m.youxiake.com/20250822191430/img/img46.9e67aee8.png':''}');">${index+1}</span>
                    . 
                    <span class="tit">${item.title}</span>
                    <span class="hot" style="background-image: url('${index<3?'	https://m.youxiake.com/20250822191430/img/img45.5235ed09.png':''}');"></span>
                </div>
             
        `
        });
        
       

        
    }).catch(err =>{
        console.log(err)
    })

    changelist=(page=1) =>{
         fetch(`https://m.youxiake.com/api/m/search/hot?${page}`).then(res=> res.json()).then(res1 => {
         res1.data.productNewRecommends.forEach((item,index) => {
            Search__new__lists.innerHTML+=`
                <div class="Search__new__list">
                    <img src="${item.img}">
                    <div class="Search__new__tag"> ${item.productType} <span>丨</span> ${item.place_label} 
                    </div>
                    <p>${item.name}</p>
                    <div class="Search__new__price">
                        <div class="price">
                            <span>￥</span>
                            <em>${item.price}</em>
                            起
                        </div>
                        <div class="day">
                            ${item.days}
                        </div>
                    </div>
                </div>
            `
        })
    }).catch(err =>{
        console.log(err)
    })
    }
    // 返回首页
    back = () =>{
        window.location.href='Lindex.html'
        // history.back()
    }
</script>
<script src="js/reset.js"></script>
<script src="https://unpkg.com/layui@2.11.5/dist/layui.js"></script>
<script>
layui.use(function(){
  var flow = layui.flow;
  // 流加载实例
  flow.load({
    elem: '#ID-flow-demo', // 流加载容器
    // scrollElem: '#ID-flow-demo4', // 滚动条所在元素，一般不用填，此处只是演示需要。
    isAuto:true,
    done: function(page, next){ // 执行下一页的回调
      // 模拟数据插入
      setTimeout(function(){
        var lis = [];
        
        // console.log(9999,page)
        
        changelist(page)
        // 执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
        // pages 为 Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
        
        next(lis.join(''), page < 10); // 此处假设总页数为 10
      }, 300);
    }
  });
});
</script>
</html>